/**
 * Created by Administrator on 2018/4/18 0018.
 */

// components
// import Checkbox from '../../../form/checkbox/index.vue'
import FakeCheckbox from './fake-checkbox.vue'
export default {
  name: 'TransferList',
  components: {
    FakeCheckbox
  },
  props: {
    prefixCls: String, // 前缀
    data: Array, // zong数据列表（右侧）
    renderFormat: Function, // 每行数据渲染函数，该函数的入参为 data 中的项
    checkedKeys: Array, // 选中的数据项中的code集合
    listStyle: Object, // 列表样式
    title: [String, Number], // 标题
    filterable: Boolean, // 是否有搜索框
    filterPlaceholder: String, // 搜索框占位文本
    filterMethod: Function, // 搜索过滤的方法
    notFoundText: String, // 无数据显示的文本信息
    // 选中的数据数量，==checkedKeys.length
    validKeysCount: Number
  },
  data() {
    return {
      showItems: [],
      query: '',
      showFooter: true,
      checkedAll: false
    }
  },
  watch: {
    //  监听data变化
    data() {
      this.updateFilteredData()
    },
    // 监听选中数量的变化
    validKeysCount() {
      this.checkedAll = !!((this.data.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0))
    }
  },
  computed: {
    classes() {
      return [
        `${this.prefixCls}`,
        {
          [`${this.prefixCls}-with-footer`]: this.showFooter
        }
      ]
    },
    bodyClasses() {
      return [
        `${this.prefixCls}-body`,
        {
          [`${this.prefixCls}-body-with-search`]: this.filterable,
          [`${this.prefixCls}-body-with-footer`]: this.showFooter
        }
      ]
    },
    //  总数据
    count() {
      const validKeysCount = this.validKeysCount
      return (validKeysCount > 0 ? `${validKeysCount}/` : '') + `${this.data.length}`
    },
    checkedAllDisabled() {
      return this.data.filter(data => !data.disabled).length <= 0
    },
    filterData() {
      return this.showItems.filter(item => this.filterMethod(item, this.query))
    },
    // 选中的值
    checkValue() {
      return this.data.filter(data => this.checkedKeys.indexOf(data.code) > -1)
    }
  },
  methods: {
    isCheck(item) {
      return this.checkedKeys.some(code => code === item.code)
    },
    itemClasses(item) {
      return [
        `${this.prefixCls}-content-item`,
        {
          [`${this.prefixCls}-content-item-disabled`]: item.disabled
        }
      ]
    },
    // 显示label
    showLabel(item) {
      return this.renderFormat(item)
    },
    select(item) {
      if (item.disabled) {
        return
      }
      const index = this.checkedKeys.indexOf(item.code)
      index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.code)
      this.$parent.handleCheckedKeys()
    },
    updateFilteredData() {
      this.showItems = this.data
    },
    getCheckedAll() {
      return this.checkedAll.length > 0 ? [] : [{
        code: 'all'
      }]
    },
    // 切换选中
    toggleSelectAll(value) {
      // 根据 checkedAll 的值判断是否是全选
      const keys = this.checkedAll ?
        this.data.filter(data => !data.disabled || this.checkedKeys.indexOf(data.code) > -1).map(data => data.code) :
        this.data.filter(data => data.disabled && this.checkedKeys.indexOf(data.code) > -1).map(data => data.code)
      this.$emit('checked-keys-change', keys)
    },
    handleQueryChange(val) {
      this.query = val
    }
  },
  created() {
    this.updateFilteredData()
  },
  mounted() {
    this.showFooter = this.$slots.default !== undefined
  }
}
